import {Component} from 'react';
import { Button } from 'antd';
let timer = null 

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 60,
      canClick: true,
    }
  }
  countDown = ()=>{
    const {count} = this.state;
    if (count === 1) {
      this.setState({
        count: 60,
        canClick: true,
      });
    } else {
      this.setState({
        count: count - 1,
        canClick: false,
      })
      timer =  setTimeout(this.countDown.bind(this), 1000)
    }
  }
 
  handleClick = () => {
    const {canClick} = this.state
    if (!canClick) {
      return
    }
    this.countDown()
    this.props.sendMes()
  }
  componentWillUnmount(){
    if(timer){
      clearTimeout(timer)
    }
  }
  render() {
    return (
      <Button style={{width: '100%',fontSize: '13px'}} onClick={() => this.handleClick()} disabled={!this.state.canClick||this.props.canClickFromF} size="large">
        {
          this.state.canClick
            ? '获取验证码'
            : `已发送（${this.state.count < 10 ? '0'+ this.state.count : this.state.count}s)`
        }
      </Button>
    )
  }
}
 
export default Timer;
